<#macro staticContent>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="binarylife.cn是阿猴的个人博客网站，用来记录平时遇到的技术问题以及写些生活随笔，积累知识，写我所想。">
    <meta name="keywords" content="技术博客,个人博客,Java,技术积累,随笔">
    <meta name="author" content="阿猴博客">
<!--     <link rel="icon" href="../../favicon.ico"> -->
    <title>猴猴的花果山</title>
	<link rel="shortcut icon" href="${path}/favicon.ico"/> 
<!--     <link href="${path}/css/bootstrap.min.css" rel="stylesheet"> -->
	<link href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/css/style.css" rel="stylesheet">
<!--     <script src="${path}/js/jquery-1.11.1.min.js"></script> -->
	<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
  </head>

  <body id="top">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
	      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
	         <span class="sr-only">切换导航</span>
	         <span class="icon-bar"></span>
	         <span class="icon-bar"></span>
	         <span class="icon-bar"></span>
	      </button>
          <a class="navbar-brand" href="${domain}">阿猴博客</a>
        </div>
        <div class="navbar-collapse collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="${domain}">首页</a></li>
<!--            	<li class="dropdown"> -->
<!--               <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">demo<span class="caret"></span></a> -->
<!--               <ul class="dropdown-menu" role="menu"> -->
<!-- 	              	<li><a href="http://www.baidu.com" target="_blank">百度</a></li> -->
<!--               </ul> -->
<!--             </li> -->
	        <li><a href="${path}/archives.html">归档</a></li>
	        <li><a href="${path}/me.html">关于我</a></li>
          </ul>
          <div class="visible-md visible-lg">
	          <form class="navbar-form navbar-right" role="search" action="${path}/search.html">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search" name="q" value="${q!}">
		        </div>
		        <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
		      </form>
          </div>
          
        </div>
      </div>
    </nav><!-- /header -->

    <div class="container">
      <#nested>
    </div> <!-- /container -->

    <div class="container-fluid footer">
      Copyright&nbsp;&copy;&nbsp;2014&nbsp;阿猴博客.不积跬步无以至千里.<a href="http://www.miitbeian.gov.cn/" target="_blank" class="noStyle">粤ICP备14079454号-1</a>
      <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1253390713'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s6.cnzz.com/z_stat.php%3Fid%3D1253390713%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
    </div> <!-- /footer -->

	<div class="visible-lg-block"><div id="back-to-top"><a href="#top"><span></span></a></div></div>

<!--     <script src="${path}/js/bootstrap.min.js"></script> -->
	<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		// 	触发tip样式	
		$("[data-toggle='tooltip']").tooltip();
		// 	为标签添加随机样式
		$("#tags a,#blogroll a").each(function(){
			 var rand = parseInt(Math.random() * 10);
			 $(this).addClass("tags"+rand);
		 });
		
	    /*---------------------------------回到顶部---------------------------------*/				
		//首先将#back-to-top隐藏
		//当滚动条的位置处于距顶部150像素以下时，跳转链接出现，否则消失
		$("#back-to-top").hide();
		$(window).scroll(function(){
			if ($(window).scrollTop()>150){
				$("#back-to-top").fadeIn(1000);
			}
			else
			{
				$("#back-to-top").fadeOut(500);
			}
		});
		//当点击跳转链接后，回到页面顶部位置
		$("#back-to-top").click(function(){
			$('body,html').animate({scrollTop:0},500);
			return false;
		});
		/*--------------------------------the end---------------------------------*/
		
	});
    </script>
  </body>
</html>
</#macro>

<!-- 文章简介列表 -->
<#macro artMacro articles page_news>
<div class="panel panel-default">
  <div class="panel-body">
  	<#list articles as art>
  		<div>
			<h4>
				<#if art.type==0>
				<span class="icon yuan">原</span>
				<#else>
				<span class="icon zhuan">转</span>
				</#if>
				<a href="${path}/article/${art.id}.html">${art.title}</a>
			</h4>
			<h6>
				类别：<a href="${path}/project/${art.projectId}.html">${art._project.name}</a>&nbsp;|&nbsp;
				发布于:${art._createDateTime}&nbsp;|&nbsp;
				标签:
				<#list art._tags as tag>
					<a href="${path}/tag/${tag}.html" class="label label-info">
						${tag}
					</a>
					&nbsp;
				</#list>

			</h6>
			<p class="blogCnt">
				${art.brief}
			</p>
			<div>
				<small>已有${art.viewCount}次阅读,
				<span class="ds-thread-count" data-thread-key="${art.id}" data-count-type="comments"></span></small>
				<a href="${path}/article/${art.id}.html" class="pull-right">查看全文<span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
			<hr />
		</div>
  	</#list>
  	<div class="pull-right">
		<@pagination prefix="&q=${q!}" pageNum=page_news.pageNumber totalPage=page_news.totalPage/>
  	</div>
  </div>
</div>
</#macro>

<!-- 热门文章 -->
<#macro hotArtMacro hotArticles>
<div class="panel panel-default">
	<div class="panel-heading">热门文章</div>
  	<ul class="list-group">
		<#list hotArticles as art>
			<li class="list-group-item">
				<a title="${art.title}" href="${path}/article/${art.id}.html">${art.title}</a>
				<span class="badge pull-right">${art.viewCount}</span>
			</li>
		</#list>
	</ul>
</div>
</#macro>

<!-- 文章分类 -->
<#macro proMacro projects>
<div class="panel panel-default">
	<div class="panel-heading">文章分类</div>
  	<div class="list-group">
		<#list projects as project>
			<a class="list-group-item" href="${path}/project/${project.id}.html">
				${project.name}
				<span class="badge pull-right">${project._artCount}</span>
			</a>
		</#list>
	</div>
</div>
</#macro>

<!-- 评论列表 -->
<#macro comListMacro>
<div class="panel panel-default visible-md-block visible-lg-block">
	<div class="panel-heading">最新评论</div>
	<div class="ds-recent-comments" data-num-items="5" data-show-avatars="1" data-show-time="0" data-show-title="0" data-show-admin="0" data-excerpt-length="20"></div>
</div>
</#macro>

<!-- 友链 & 标签 & 留言-->
<#macro myTab tags>
<div class="panel panel-default  visible-md-block visible-lg-block">
	<div class="panel-heading">
		<ul id="myTab" class="nav nav-pills nav-justified">
		   <li class="active">
		      <a href="#tags" data-toggle="pill">热门标签</a>
		   </li>
		   <li>
		   	<a href="#blogroll" data-toggle="pill">友情链接</a>
		   </li>
		   <li>
		   	<a href="#message" data-toggle="pill">给我留言</a>
		   </li>
		</ul>
	</div>
	<div class="panel-body">
		<div id="myTabContent" class="tab-content">
		   <div class="tab-pane fade in active" id="tags">
		   	<#list tags as tag>
		   		<a href="${path}/tag/${tag}.html">${tag}</a>
		   	</#list>
		   </div>
		   <div class="tab-pane fade" id="blogroll">
		    <#list blogroll as link>
				<a href="${link.url}" target="_blank">${link.name}</a>
			</#list>
		   </div>
		   <div class="tab-pane fade well" id="message">
			   <div class="form-group">
			      <label for="vUser" class="sr-only">用户名</label>
			      <input type="text" class="form-control" id="vUser" placeholder="用户名" maxlength="10">
			   </div>
			   <div class="form-group">
			      <label for="vEmail" class="sr-only">邮箱</label>
			      <input type="email" class="form-control" id="vEmail" placeholder="Email" maxlength="50">
			   </div>
			   <div class="form-group">
			      <label for="vContent" class="sr-only">内容</label>
			      <textarea rows="3" class="form-control" id="vContent" placeholder="说点什么吧~" maxlength="500"></textarea>
			   </div>
			   <div class="form-group">
			      <button class="btn btn-info btn-block" onclick="msgSubmit()">提交</button>
			   </div>
			   <div style="text-align:center; color:red;" id="msgBack"></div>
		   </div>
		</div>
	</div>
<script type="text/javascript">
function msgSubmit(){
	var good = true;
	if($('#vUser').val()==null || $('#vUser').val().trim() ==""){
		good = false;
		$('#vUser').parent().addClass("has-error");
	}
	if($('#vEmail').val()==null || $('#vEmail').val().trim() ==""){
		good = false;
		$('#vEmail').parent().addClass("has-error");
	}
	if($('#vContent').val()==null || $('#vContent').val().trim() ==""){
		good = false;
		$('#vContent').parent().addClass("has-error");
	}
	if(good){
		$.post("${path}/addMsg.html",{'message.nick':$('#vUser').val(),'message.email':$('#vEmail').val(),'message.content':$('#vContent').val()},function(data){
			$('#msgBack').html(data.msg);
			$('#vContent,#vEmail,#vUser').parent().removeClass("has-error");
			if(data.success == true){
				$('#vContent,#vEmail,#vUser').val("");
			}
			setTimeout("$('#msgBack').html('')",2000);
		}, "json");
	}
}
</script>
</div>
</#macro>

<!-- 面包屑导航 -->
<#macro crumbMacro crumbs>
<ol class="breadcrumb">
	<li><a href="${domain}">首页</a></li>
	<#list crumbs as crumb>
		<#if crumb_has_next>
		 	<li><a href="${path}/${crumb.url}">${crumb.name}</a></li>
		 <#else>
		 	<li class="active">${crumb.name}</li>
		</#if>
	</#list>
</ol>
</#macro>

<!-- 引用多说评论插件 -->
<#macro commentMacro article>
<div class="panel panel-default">
	 	<div class="panel-body">
			<!-- 多说评论框 start -->
			<div class="ds-thread" data-thread-key="${article.id}" data-title="${article.title}" data-url="${path}/article/${article.id}.html"></div>
			<!-- 多说评论框 end -->
 	</div>
</div>
</#macro>

<!-- 分页工具条 -->
<#macro pagination prefix="" pageNum=1 totalPage=1>
	<#if totalPage == 0>
		<#assign _totalPage = 1 />
	<#else>
		<#assign _totalPage = totalPage />
	</#if>
	<#if _totalPage != 1>
	<ul class="pagination center-block">
		<#if pageNum == 1>
			<li><a href="javascript:;" class="disabled"><span class="glyphicon glyphicon-step-backward"></span></a></li>
			<li><a href="javascript:;" class="disabled"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
		<#else>
			<li><a href="?p=1${prefix}"><span class="glyphicon glyphicon-step-backward"></span></a></li>
			<li><a href="?p=${pageNum-1}${prefix}"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
		</#if>
		<#if ( _totalPage - pageNum ) gt 6>
			<#assign endIndex = ( pageNum + 6) />
		<#else>
			<#assign endIndex = _totalPage />
		</#if>
		<#if ( pageNum - 3 ) gt 0>
			<#assign startIndex = ( pageNum - 3) />
		<#else>
			<#assign startIndex = 1 />
		</#if>
		<#list startIndex..endIndex as _pageNum>
		<li>
			<#if _pageNum == pageNum>
				<a href="javascript:;" class="active">${_pageNum}</a>
			<#else>
				<a href="?p=${_pageNum}${prefix}">${_pageNum}</a>
			</#if>

		</li>
		</#list>
		<#if pageNum == _totalPage>
			<li><a href="javascript:;" class="disabled"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
			<li><a href="javascript:;" class="disabled"><span class="glyphicon glyphicon-step-forward"></span></a></li>
		<#else>
			<li><a href="?p=${pageNum+1}${prefix}"><span class="glyphicon glyphicon-chevron-right"></a></li>
			<li><a href="?p=${_totalPage}${prefix}"><span class="glyphicon glyphicon-step-forward"></span></a></li>
		</#if>
	</ul>
	</#if>
</#macro>
